<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>照片墙</title>
    <style type="text/css">
        * {  margin: 0;  padding: 0;  border: 0;  list-style: none;  }
        ul{  height: 600px;  background: skyblue;  position: relative;  margin-top: 100px;  }
        ul li{  position: absolute;  top: 100px;  background: #fff;  padding: 20px 20px 100px 20px;  box-shadow: 0 0 10px #000;  transition: all 0.5s linear;  z-index: 1; }
        li:nth-child(1){left: 120px; transform: rotate(45deg)}
        li:nth-child(2){left: 420px; transform: rotate(-30deg)}
        li:nth-child(3){left: 720px; transform: rotate(15deg)}
        li:nth-child(4){left: 1020px; transform: rotate(75deg)}
        li:hover{transform: rotate(0deg) scale(1.2);  z-index: 2; }
    </style>
</head>
<body>
<ul>
    <li><img src="3D/1.jpg" alt="" width="270"></li>
    <li><img src="3D/2.jpg" alt="" width="270"></li>
    <li><img src="3D/3.jpg" alt="" width="270"></li>
    <li><img src="3D/4.jpg" alt="" width="270"></li>
</ul>
</body>
</html>